<template>
    <div class="center-cmp">
        <div class="cc-header">
            <dv-decoration-1 style="width:200px;height:50px;" />
            <div>任务概况</div>
            <dv-decoration-1 style="width:200px;height:50px;" />
        </div>
        <div class="cc-details">
            <div class="cc-item">
                <CardFlipper :value=taskAmount title="累积任务数" title-position="top"
                    style="width: 100px; height: 100px;" />
            </div>
            <div class="cc-item">
                <WaterLevelPond :wlpConfig="config" :wlpStyle="wlpStyle" title="按时完成率" title-position="top">
                </WaterLevelPond>
            </div>
            <div class="cc-item">
                <CardFlipper :value=followupAmount title="回访次数" title-position="top" />
            </div>
            <div class="cc-item">
                <WaterLevelPond :wlpConfig="config" :wlpStyle="wlpStyle" title="按时回访率" title-position="top">
                </WaterLevelPond>
            </div>
        </div>
    </div>
</template>

<script setup name="Growth">
import CardFlipper from '@/views/dashboard/components/datav/CardFlipper.vue';
import WaterLevelPond from '@/views/dashboard/components/datav/WaterLevelPond.vue';

const { proxy } = getCurrentInstance();
const { product_area } = proxy.useDict('product_area');


const planterList = ref([])

const taskAmount = 123;
const followupAmount = 123;

const cardStyle = {
    border: '2px solid #3498db'
};

const wlpStyle = {
    width: "80px",
    height: "80px"
}

const config = reactive({
    data: [66, 45],
    shape: 'roundRect',
})

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 500,
        asId: null,
        productId: null,
        year: null,
    },
    rules: {
        productAreaId: [
            { required: true, message: "产区不能为空", trigger: "blur" }
        ],
        planterId: [
            { required: true, message: "种植主体不能为空", trigger: "blur" }
        ]
    }
});
const { queryParams, rules } = toRefs(data);

</script>

<style lang="scss" scoped>
.center-cmp {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;

    .cc-header {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
    }

    .cc-details {
        height: 120px;
        display: flex;
        margin: 20px;
        justify-content: center;
        font-size: 18px;
        align-items: flex-start;

        .cc-item {
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
    }

    .cc-main-container {
        position: relative;
        flex: 1;
        display: flex;

        .ccmc-middle {
            width: 50%;
            height: 90%;

            .active-ring-name {
                font-size: 20px !important;
            }
        }

        .ccmc-left,
        .ccmc-right {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 24px;

            span {
                font-size: 40px;
                font-weight: bold;
            }

            .station-info {
                height: 80px;
                display: flex;
                align-items: center;
            }
        }

        .ccmc-left {
            // align-items: flex-end;

            span {
                margin-left: 20px;
            }
        }

        .ccmc-right {
            align-items: flex-start;

            span {
                margin-right: 20px;
            }
        }
    }

    .label-tag {
        position: absolute;
        width: 500px;
        height: 30px;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
